/**
 * 已解锁内容页面
 * 展示用户已解锁的特殊菜品和贴图故事
 */
import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../../store'
import { identityUtils } from '../../../utils/identityUtils'
import './index.scss'

export default function UnlockedContent() {
  const { state } = useAppContext()
  const { currentUser } = state
  const [unlockedContents, setUnlockedContents] = useState<any>({ specialDishes: [], stickerStories: [] })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (currentUser?.id) {
      loadUnlockedContents()
    }
  }, [currentUser])

  const loadUnlockedContents = async () => {
    try {
      setLoading(true)
      const userId = currentUser?.id || ''
      const contents = await identityUtils.getUnlockedContents(userId)
      setUnlockedContents(contents)
    } catch (error) {
      console.error('加载已解锁内容失败:', error)
      Taro.showToast({ title: '加载失败', icon: 'error' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className='unlocked-content'>
      <View className='header'>
        <Text className='title'>已解锁内容</Text>
        <Text className='subtitle'>您已解锁的专属内容</Text>
      </View>

      {loading ? (
        <View className='loading'>
          <Text>加载中...</Text>
        </View>
      ) : (
        <ScrollView className='content-list' scrollY>
          {/* 特殊菜品区域 */}
          {unlockedContents.specialDishes.length > 0 && (
            <View className='section'>
              <Text className='section-title'>特殊菜品</Text>
              {unlockedContents.specialDishes.map((dish: any) => (
                <View key={dish.id} className='content-item special-dish'>
                  <Text className='content-icon'>{dish.icon}</Text>
                  <View className='content-info'>
                    <Text className='content-name'>{dish.dishName}</Text>
                    <Text className='content-desc'>{dish.specialStory}</Text>
                  </View>
                </View>
              ))}
            </View>
          )}

          {/* 贴图故事区域 */}
          {unlockedContents.stickerStories.length > 0 && (
            <View className='section'>
              <Text className='section-title'>贴图故事</Text>
              {unlockedContents.stickerStories.map((story: any) => (
                <View key={story.id} className='content-item sticker-story'>
                  <Text className='content-icon'>{story.icon}</Text>
                  <View className='content-info'>
                    <Text className='content-name'>{story.stickerName}</Text>
                    <Text className='content-desc'>{story.storyContent}</Text>
                  </View>
                </View>
              ))}
            </View>
          )}

          {/* 空状态 - 当没有解锁任何内容时显示 */}
          {unlockedContents.specialDishes.length === 0 && unlockedContents.stickerStories.length === 0 && (
            <View className='empty-state'>
              <Text className='empty-icon'>🔒</Text>
              <Text className='empty-text'>还没有解锁任何内容</Text>
              <Text className='empty-desc'>继续互动增加亲密度来解锁更多内容</Text>
            </View>
          )}
        </ScrollView>
      )}
    </View>
  )
} 